<template>
  <div>
    <section class="section_wrap">
      <el-form :inline="true" style="text-align: left">
        <el-form-item label="关键字:">
          <el-input
            v-model="query.keyWord"
            placeholder="电话,推广人:"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchData">搜索</el-button>
          <el-button type="danger" @click="emptyData">清空</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="ListData" border style="width: 100%">
        <el-table-column
          align="center"
          fixed
          label="序号"
          type="index"
          :reserve-selection="true"
          width="50px"
          class-name="checkBox"
        ></el-table-column>
        <!-- <el-table-column
          prop="username"
          label="姓名"
          width="200"
          align="center"
        >
        </el-table-column> -->
        <el-table-column prop="tel" label="电话" width="400" align="center">
        </el-table-column>
        <el-table-column
          prop="extensionName"
          label="推广人"
          width="220"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="申请时间"
          width="420"
          align="center"
        >
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >转注册</el-button
            >
            <el-popconfirm
              title="确定删除这条数据么？"
              @onConfirm="dataDelete(scope.row)"
            >
              <el-button slot="reference" type="text" style="color: red"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <span class="title">小计：共{{ this.total }}条数据</span>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :total="total"
          :page-size="query.pageSize"
          :current-page.sync="query.pageNo"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </section>
    <el-dialog
      title="提示"
      :visible.sync="registeredButton"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :inline="true"
        class="demo-form-inline"
        :rules="rules"
        ref="form"
      >
        <el-form-item label="请选择:">
          <el-select v-model="registeredUP.region" placeholder="请选择">
            <el-option
              v-for="item in orderData"
              :key="item.itemValue"
              :label="item.itemText"
              :value="item.itemValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名:" label-width="60px" prop="userName">
          <el-input v-model="registeredUP.uname" class="inputCss"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="registeredButton = false">取 消</el-button>
        <el-button type="primary" @click="submitData">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'
import {
  getRegisteredList,
  getorderState,
  registeredUpload,
  deleteData,
} from "../../assets/js/api";
// import { message } from '../../assets/js/resetMessage';
export default {
  data() {
    // var validateNull = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error("必填项不能为空"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      ListData: [], //列表数据详情!
      registeredButton: false, //列表-操作-转为注册弹窗开关!
      total: null, //列表数据总条数!
      orderData: [], //转注册,下拉框数据!
      query: {
        pageSize: 10,
        pageNo: 1,
        keyWord: null, //模糊查询条件!
      },
      registeredUP: {
        createTime: null, //创建时间!
        extensionId: null, //推广人!
        extensionName: null, //推广人名!
        id: null, //id!
        region: null, //归属区域ID!
        regionName: null, //归属区域!
        status: null, //状态!
        tel: null, //手机号!
        uname: null, //用户名!
      }, //转注册需要提交的数据!
      rules: {
        userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getListData();
  },
  methods: {
    //清空功能!
    emptyData() {
      this.query.keyWord = "";
      this.getListData();
    },
    //搜索功能!
    searchData() {
      this.query.pageNo = 1;
      this.getListData();
    },

    //获取注册管理列表数据!
    getListData() {
      getRegisteredList(this.query).then((res) => {
        this.ListData = res.data.records;
        this.total = res.data.total;
      });
    },
    // 转注册功能!
    handleClick(row) {
      this.registeredUP.createTime = row.createTime;
      this.registeredUP.extensionId = row.extensionId;
      this.registeredUP.extensionName = row.extensionName;
      this.registeredUP.id = row.id;
      this.registeredUP.region = row.region;
      this.registeredUP.regionName = row.regionName;
      this.registeredUP.status = row.status;
      this.registeredUP.tel = row.tel;
      // this.registeredUP.uname = row.username;
      this.registeredButton = true;
      getorderState().then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].itemValue = Number(res.data[i].itemValue);
        }
        this.orderData = res.data;
      });
    },
    // 删除数据功能!
    dataDelete(row) {
      deleteData(row.id).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.getListData();
        } else {
          this.$message.erroe(res.message);
        }
      });
    },
    //转注册提交按钮!
    submitData() {
      if (this.registeredUP.uname !== null) {
        registeredUpload(this.registeredUP).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
            this.registeredButton = false;
            this.getListData();
          } else {
            this.$message.error(res.message);
            this.registeredButton = false;
          }
        });
      } else {
        this.$message.error("请输入姓名");
      }

      // this.$refs.form.validate((valid) => {
      //   if (!valid) {
      //     registeredUpload(this.registeredUP).then((res) => {
      //       if (res.code == 200) {
      //         this.$message.success(res.message);
      //         this.registeredButton = false;
      //         this.getListData();
      //       } else {
      //         this.$message.error(res.message);
      //         this.registeredButton = false;
      //       }
      //     });
      //   }else{
      //     this.$message.error('1')
      //   }
      // });
    },
    handleCurrentChange(data) {
      this.query.pageNo = data;
      this.getListData();
    },
    handleSizeChange(data) {
      this.query.pageSize = data;
      this.getListData();
    },
    // 操作,转注册弹出层监听事件!
    handleClose() {
      this.registeredButton = false;
    },
  },
};
</script>
<style lang="less" scoped>
// 分页,每页多少条,向前向后翻按钮位置!
::v-deep .el-pagination {
  position: absolute;
  margin-top: 20px;
  right: 0;
  padding: 0;
}
::v-deep .el-pagination__total {
  visibility: hidden;
}
// 总条数位置!
.title {
  position: absolute;
  left: 0;
  top: 20px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 21px;
}
.inputCss {
  width: 215px;
}
</style>
